<template>
  <div class="app-container">
    <div class="flex flex-items-start flex-justify-between pb-2px">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <div>
          <el-form-item prop="username">
            <el-input v-model="searchData.keyword" :placeholder="$t('order.请输入订单号')" clearable />
          </el-form-item>
          <el-form-item prop="phone">
            <el-date-picker
        v-model="timeValue"
         :range-separator="$t('common.至')"
        type="datetimerange"
       :start-placeholder="$t('common.开始时间')"
        :end-placeholder="$t('common.结束时间')"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round :icon="Search" @click="handleSearch">
              {{ $t('common.搜索') }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="table-wrapper" v-loading="loading">
      <el-table
        :data="tableData"
        fixed="left"
        header-cell-class-name="cell-self-clas"
        cell-class-name="cell-class-name"
        :row-class-name="tableRowClassName"
        size="large"
        border
        :span-method="arraySpanMethod"
      >

        <el-table-column prop="good"  :label="$t('shop.商品信息')" align="center" fixed min-width="253">
          <template #default="{ row }" >
            <div v-if="row.username !== 'orderorder'">
              <div class="flex flex-items-center pb-16px pt-16px good text-align-left" v-for="(item, index) in row.goodsdata" :key="item.id">
                <el-image class="w-97px h-76px mr-8px rounded-10px" :src="item.pic" fit="fill"
                  :preview-src-list="[item.pic]" preview-teleported></el-image>
                  <!-- <span v-if="item.name" class="flex-1 line-clamp-2 color-#1D2129">{{ item.name }}</span> -->
                  <span v-if="item.name&&locale=='ru'" class="flex-1 line-clamp-2 color-#1D2129">{{ item.name_ru }}</span>
                  <span v-if="item.name&&locale=='zh'" class="flex-1 line-clamp-2 color-#1D2129">{{ item.name }}</span>
                  <span v-if="!item.name"  class="flex-1 line-clamp-2 color-#1D2129">{{ row[CL('title')] }}</span>
              </div>
            </div>
            <div v-else class="order-wrapper">
              <div class="left-text">
                <span class="mr-16px">{{ $t('order.订单号：') }}{{ row.ordernum }}</span>
                <span class="mr-16px">{{ $t('order.下单时间：') }}{{ row.createtime }}</span>
                <span class="color-#06C36E cursor-pointer underline">{{ $t('order.交易合同') }}</span>
              </div>
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="linkman" :label="$t('order.收货人')" align="center" min-width="98">
          <template #default="{ row }" >
            <div class="flex flex-col flex-justify-center flex-items-center pt-10px pb-10px">
              <el-image class="w-54px h-54px border-rd-27px" :src="row.user?.avatar" fit="fill"></el-image>
              <div class="flex-1 line-clamp-2 color-#1D2129 mt-6px" v-if="locale=='zh'">{{ row.linkman || '暂无' }}</div>
              <div class="flex-1 line-clamp-2 color-#1D2129 mt-6px" v-else>{{ row.linkman_ru || 'Пока нет' }}</div>
              <div class="flex flex-items-center" v-if="row?.user.level">
                <img :src="getImg(row.user?.level)" class="w-13px h-13px mr-4px">
                <span class="font-size-12px  color-#F5C052">{{ ['','黄金会员','铂金会员','钻石会员'][row.user?.level] }}</span>
              </div>
            </div>
          </template>

        </el-table-column>
        <el-table-column prop="area" :label="$t('order.收货地址')" align="center"  min-width="116">
          <template #default="{ row }" >
            <template v-if="locale=='zh'">
              {{ row.area }}{{ row.address }}
            </template>
            <template v-else>
              {{ row.area_ru }}{{ row.address_ru }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('order.购买数量')" align="center" min-width="90">
          <template #default="{ row }">
            <div class="box-positon">
              <div v-for="(item, index) in row.goodsdata" :key="index"
                class="flex-1 flex flex-items-center flex-justify-center column-box">
                <span>{{item.num}} {{ $t('order.个') }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('order.颜色/规格')" align="center"  min-width="90">
          <template #default="{ row }">
            <div class="box-positon">
              <div class="flex flex-col flex-justify-center flex-items-center color-#1D2129 flex-1 column-box"
                v-for="(item, index) in row.goodsdata" :key="index">
                <span >{{item[CL('pro_color')] && item[CL('gg_params')] ? item[CL('pro_color')]+ '/' + item[CL('gg_params')] : item[CL('gg_params')] ? item[CL('gg_params')]:item[CL('pro_color')]?item[CL('pro_color')]:'' }}</span>

              </div>
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('order.运输服务')" align="center"   min-width="120">
          <template #default="{ row }">
            <span v-if="row.freight_type === 3"> {{ $t('order.自行发货，无需商家发货') }} </span>
            <span v-if="row.yfdf === 1">{{ $t('order.自行承担运费,由商家负责发货，运费到付') }}</span>
            <span v-if="row.fw_id&&locale=='zh'">{{ $t('order.商家代运输服务') }}-{{ row.fw_name }}</span>
            <span v-else-if="row.fw_id&&locale=='ru'">{{ $t('order.商家代运输服务') }}-{{ row.fw_name_ru }}</span>
            <span v-if="row.freight_type != 3 && !row.fw_id && row.yfdf != 1">{{ $t('order.包含运费') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('order.总价格')" align="center"  min-width="97">
          <template #default="{ row }">
            {{ row.totalprice }} {{ $t('order.元') }}
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('order.支付状态')" align="center" min-width="100">
          <template #default="{ row }">
            <div class="tag-status" v-if="row.status == 0">{{ $t('order.待支付') }}</div>
            <div class="tag-status" v-if="row.status > 0">{{ $t('order.已支付') }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('order.订单状态')" align="center"  min-width="100">
          <template #default="{ row }">
            <!-- <div class="tag-status active">待发货</div> -->
            <div class="tag-status" v-if="row.status == 0">{{ $t('order.待支付') }}</div>
            <div class="tag-status" v-if="row.status == 1">{{ $t('order.已支付') }}</div>
            <div class="tag-status active" v-if="row.status == 2">{{ $t('order.待发货') }}</div>
            <div class="tag-status" v-if="row.status == 3">{{ $t('order.已发货') }}</div>
            <div class="tag-status" v-if="row.status == 4">{{ $t('order.已支付未发货') }}</div>
            <div class="tag-status" v-if="row.status == 5">{{ $t('order.已完成') }}</div>
            <div class="tag-status" v-if="row.status == 6">{{ $t('order.关闭') }}</div>
            <div class="tag-status" v-if="row.status == 7">{{ $t('order.买家取消订单') }}</div>
            <div class="tag-status active" v-if="row.status == 8">{{ $t('order.运输异常') }}</div>
            <div class="tag-status" v-if="row.status == 9">{{ $t('order.申请退款') }}</div>
            <div class="tag-status" v-if="row.status == 10">{{ $t('order.被冻结的订单') }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="status" :label="$t('order.支付状态')" align="center" min-width="100">
          <template #default="{ row }">
            <div class="tag-status">已支付</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('order.订单状态')" align="center"  min-width="100">
          <template #default="{ row }">
            <div class="tag-status">已完成</div>
          </template>
        </el-table-column> -->

        <el-table-column fixed="right"  :label="$t('common.操作')" width="135" align="center">
          <template #default="scope">
            <div class="flex flex-col flex-items-center" v-if="scope.row.username !== 'orderorder'">
              <el-button type="info" round class="info-self-btn" @click="onOpenEvalue(scope.row)">
                {{ $t('order.回复评价') }}
              </el-button>
              <el-button type="primary" @click="linkBuy(scope.row.tel)" round mt-12px ml-0>
                {{ $t('order.联系买家') }}
              </el-button>
            </div>

            <el-button type="primary" round v-else class="bg-#00B1CA border-none">已解冻</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager-wrapper mt-10px">
      <el-pagination :layout="paginationData.layout" :page-sizes="paginationData.pageSizes"
        :total="paginationData.total" :page-size="paginationData.pageSize" :current-page="paginationData.currentPage"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>



    <!-- 评价  页面 -->
    <el-dialog v-model="showEvalue" title="用户对本次服务的评价" width="720px" border-rd-24px class="dialog-wrapppx">
      <div class="dialog-wrapper" >
        <div class="flex flex-items-center mb-12px">
          <span mr-6px  position-relative top-1px>服务整体评价</span>
          <el-rate  />
        </div>
        <div class="color-#343434 font-600 mb-14px">评价</div>
        <div>这个东西真的是太棒了，真是绝了。</div>
        <div class="h-32px"></div>
        <div class="color-#343434 font-600 mb-2px">商家回复：</div>
        <div class="flex flex-items-center mb-16px">
          <span mr-8px position-relative top-1px>对买家整体评级</span>
          <el-rate  />
        </div>
        <div>
          <el-input
            type="textarea"
            placeholder="感谢您的支持，您的支持让我们更有动力"
            :rows="4"
            show-word-limit
            maxlength="100"
            resize="none"
          ></el-input>
        </div>
      </div>

      <template #footer>
        <el-button  @click="showEvalue = false" round>
         {{ t('common.取消') }}
        </el-button>
        <el-button type="primary"  round >
          {{ t('common.确认') }}
        </el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisibleConcat" :title="$t('order.合作协议')" width="720px" border-rd-24px class="dialog-wrapppx">

<div class="dialog-wrapper" v-loading="concatLoading">
  <h3>{{ $t('order.交易合同') }}</h3>
  <div class="upload">
    <el-upload
      drag
      :action="getAction()"
      :multiple="false"
      :limit="1"
      :data="{
        aid: 1,
      }"
      :on-preview="handlePreviewFile"
      :before-upload="beforeAvatarUploadFile"
      :on-exceed="handleExceedFile"
      v-model:file-list="fileListConcat"
    >
      <img src="/static/img/doc.png" alt="" w-52px h-52px mb-10px>
      <div class="el-upload__text">
        <div v-if="locale=='zh'">
                拖拽文件至此，或 <em>选择文件上传（支持word、jpg、png格式）</em>
              </div>
              <div v-else>
                Перетащите файл сюда или выберите файл для загрузки（Поддержка форматов word, jpg, png）
              </div>
      </div>
    </el-upload>
  </div>
 <h3>{{ $t('order.货物清单') }}</h3>
  <div class="upload">
    <el-upload
      drag
      :action="getAction()"
      :multiple="false"
      :limit="1"
      :data="{
        aid: 1,
      }"
      :on-preview="handlePreviewFile"
      :before-upload="beforeAvatarUploadFile"
      :on-exceed="handleExceedFile"
       v-model:file-list="shipPreviewList"
    >
      <img src="/static/img/doc.png" alt="" w-52px h-52px mb-10px>
      <div class="el-upload__text">
        <div v-if="locale=='zh'">
                拖拽文件至此，或 <em>选择文件上传（支持word、jpg、png格式）</em>
              </div>
              <div v-else>
                Перетащите файл сюда или выберите файл для загрузки（Поддержка форматов word, jpg, png）
              </div>
      </div>
    </el-upload>
  </div>
  <h3>{{ $t('order.委托售后及免责协议') }}</h3>
  <div class="upload">
    <el-upload
      drag
      :action="getAction()"
      :multiple="false"
      :limit="1"
      :data="{
        aid: 1,
      }"
      :on-preview="handlePreviewFile"
      :before-upload="beforeAvatarUploadFile"
      :on-exceed="handleExceedFile"
      v-model:file-list="weituoPreviewList"
    >
      <img src="/static/img/doc.png" alt="" w-52px h-52px mb-10px>
      <div class="el-upload__text">
        <div v-if="locale=='zh'">
                拖拽文件至此，或 <em>选择文件上传（支持word、jpg、png格式）</em>
              </div>
              <div v-else>
                Перетащите файл сюда или выберите файл для загрузки（Поддержка форматов word, jpg, png）
              </div>
      </div>
    </el-upload>
  </div>
</div>

<template #footer>
  <el-button  @click="dialogVisibleConcat = false" round>
    {{ t('common.取消') }}
  </el-button>
  <el-button type="primary" :loading="concatLoading" round @click="onSubmitConcat">
    {{ t('common.确认') }}
  </el-button>
</template>
</el-dialog>


<!-- 图片预览器 -->
<div class="demo-image__preview">
<!-- element-plus内部组件 -->
<el-image-viewer @close="() => { showViewer = false }" v-if="showViewer" :url-list="concatPreviewList" />

</div>


  </div>
</template>


<script lang="ts" setup>
import type { OrderData } from "@@/apis/order/type"
import type { FormInstance  } from "element-plus"

import {  getOrderDataApi,orderHtPost,getHtPost } from "@@/apis/order"
import { usePagination } from "@@/composables/usePagination"
import { CirclePlus, Delete, Download, Refresh, RefreshRight, Search } from "@element-plus/icons-vue"
import { cloneDeep } from "lodash-es"
import type { TableColumnCtx } from 'element-plus'

import { createC2CConversation } from "@@/utils/im"

import vipImg from '/static/img/member0.png';
import vipImg1 from '/static/img/member1.png';
import vipImg2 from '/static/img/member2.png';
import vipImg3 from '/static/img/member3.png';
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();//登录国籍
import { inject } from 'vue'
const CL: any = inject("$CL");
defineOptions({
  // 命名当前组件
  name: "ElementPlus"
})

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()


// #region 查
const tableData = ref<OrderData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const timeValue = ref<string[]>([])

const searchData = reactive({
  status: 5,
  ctime: '',
  keyword: '',
})

watch(()=>timeValue.value,(val)=> {
  if(val){
  searchData.ctime = val.join(' ~ ')
  }else{
    searchData.ctime=''
  }
})

watch(()=>searchData.status,(val)=> {
  getTableData();
})

const getImg = (val: string | number) => {
  if(val === 1) return vipImg1;
  if(val === 2) return vipImg2;
  if(val === 3) return vipImg3;
  return vipImg;
}



// #region
  // 合作协议
  const dialogVisibleConcat = ref(false);
  const showViewer = ref(false)
  const concatPreviewList = ref<string[]>([]) // 预览列表

  const fileListConcat = ref<{name: string,url: string,response?: {url: string},raw?: {type: string}  }[]>([]);
  const shipPreviewList = ref<{name: string,url: string,response?: {url: string},raw?: {type: string}  }[]>([]);
  const weituoPreviewList = ref<{name: string,url: string,response?: {url: string},raw?: {type: string}  }[]>([]);

  const concatLoading = ref(false);
  const orderid = ref(0);

  const getAction = ()=> {
      return import.meta.env.VITE_BASE_URL + "/?s=ApiImageupload/uploadImg";
  };

  // 获取合同接口
  const getConcat = async ()=> {

    try {
      let { data } = await getHtPost({
        orderid: orderid.value,
      });
      fileListConcat.value = data.jyht.url ? [{...data.jyht,response:{url: data.jyht.url || ''},raw: {type: data.jyht.type}}] : [];
      shipPreviewList.value = data.hwqd.url ? [{...data.hwqd,response:{url: data.hwqd.url || ''},raw: {type: data.hwqd.type}}] : [];
      weituoPreviewList.value =  data.shmzxy.url ? [{...data.shmzxy,response:{url: data.shmzxy.url || ''},raw: {type: data.shmzxy.type}}] : [];
    } catch (error) {

    } finally {

    }

  }


  const onConcatTrans = (id:number)=> {
    dialogVisibleConcat.value = true;
    orderid.value = id;
    getConcat();
  }

  // 文件类型
  let typeArr = [
    '.doc',
    '.docx',
    '.xml',
    'application/msword',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'image/jpg',
    'image/jpeg',
    'image/png'
  ]
  const beforeAvatarUploadFile = (rawFile: { type: string; size: number })=> {
    console.log(rawFile.type,'23')
    if (typeArr.indexOf(rawFile.type) < 0) {
      ElMessage.error(t('common.格式不正确,请上传word,jpg,png格式'))
      return false
    } else if (rawFile.size / 1024 / 1024 > 10) {
      ElMessage.error(t('common.文件大小超过10M'))
      return false
    }
    return true;
  }

  // 超限判断 handleExceedFile
  const handleExceedFile= () => {
   ElMessage.warning( t('common.只能上传一个文件，请删除后重试'))
  }
  const handlePreviewFile = (e: { raw: { type: string,name: string }; response: { url: string,name: string } })=> {
    console.log( e.response,'sfjaljfaljfla')
    console.log(e,'预览预览')
    if (e.raw.type === 'image/jpg' || e.raw.type === 'image/jpeg' || e.raw.type === 'image/png') {
      concatPreviewList.value = [e.response.url];
      showViewer.value = true;
    } else { // 其他word跳转下载链接
      // 动态创建a标签实现在线预览
      let dom = document.createElement('a')
      dom.target = '_blank';
      dom.download =  new Date().getTime() + '';
      dom.href = e.response.url;
      dom.click();
    }
  }

  const onSubmitConcat = ()=> {
    if (!fileListConcat.value[0]?.response?.url || !shipPreviewList.value[0]?.response?.url || !weituoPreviewList.value[0]?.response?.url) {
      ElMessage.warning(t('common.请上传文件'))
      return;
    }
    concatLoading.value = true;
    let obj = {
      jyht: JSON.stringify([{
        url: fileListConcat.value[0]?.response?.url,
        name: fileListConcat.value[0]?.name,
        type: fileListConcat.value[0]?.raw?.type,
      }]),
      hwqd: JSON.stringify([{
        url: shipPreviewList.value[0]?.response?.url,
        name: shipPreviewList.value[0]?.name,
        type: shipPreviewList.value[0]?.raw?.type,
      }]),
      shmzxy:JSON.stringify([{
        url: weituoPreviewList.value[0]?.response?.url,
        name: weituoPreviewList.value[0]?.name,
        type: weituoPreviewList.value[0]?.raw?.type,
      }]),
    }

    orderHtPost({
      orderid: orderid.value,
      ...obj,
    }).then(() => {
      dialogVisibleConcat.value = false;
      ElMessage.success(t('common.提交成功'))
      getTableData();
    }).finally(() => {
      concatLoading.value = false
    })
  }

// #endregion
function getTableData() {
  loading.value = true

  getOrderDataApi({
    page: paginationData.currentPage,
    limit: paginationData.pageSize,
    ctime: searchData.ctime,
    status: searchData.status,
    keyword: searchData.keyword,
  }).then(({ data }) => {
    paginationData.total = data.count
    tableData.value = data.list
  }).catch(() => {
    tableData.value = []
  }).finally(() => {
    loading.value = false
  })
}
function handleSearch() {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
// 重置
function resetSearch() {
  searchFormRef.value?.resetFields()
  handleSearch()
}
// #endregion
// #region 评价
const showEvalue = ref(false);
const onOpenEvalue = (val: any)=> {
  console.log("val========", val)
  showEvalue.value = true;
}
//#endregion

// 表格隔行变色
interface User {
  date: string
  name: string
  address: string
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex % 2 == 0) {
    return 'primary-row-color'
  } else {
    return 'info-row-color'
  }
}

interface User {
  id: string
  name: string
  username: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}
// 合并行
const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (row.username === 'orderorder') {
    if (columnIndex === 0) {
      return [1, 9]
    } else if (columnIndex === 9) {
    } else {
      return [0, 0]
    }
  }

}

// 联系买家
const linkBuy = (tel: string)=> {
  // ElMessage({
  //   message: '暂未开通客服',
  //   type: 'warning',
  // })
  createC2CConversation(tel)
}
// 监听分页参数的变化
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>


<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}




.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}


.app-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // 筛选项重置
  .el-form {
    .el-form-item {
      :deep(.el-form-item__content) {
        .el-date-editor {
          border-radius: 16px;
          background: #F2F3F5;
          box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
        }
      }

      .el-input {
        :deep(.el-input__wrapper) {
          border-radius: 16px;
          box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
          background: #F2F3F5;
        }

      }
    }

  }

  .el-select {
    :deep(.el-select__wrapper) {
      border-radius: 16px;
      background: #007AFF;

      .el-select__placeholder {
        color: #fff;
      }

      .el-select__suffix {
        .el-icon {
          color: #fff;
        }
      }
    }
  }




  .table-wrapper {
    flex: 1;
    overflow: hidden;

    .el-table {
      height: 100%;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;

      :deep(.cell-self-clas) {
        color: #1D2129 !important;
        font-size: 14px;
        font-weight: 400;
        background: #F2F3F5;
        // box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
        border-right: none;
      }

      :deep(.cell-class-name) {
        color: #1D2129 !important;
        font-size: 14px;
        font-weight: 400;
        padding: 0;

        .cell {
          .box-positon {
            position: absolute;
            top: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            left: 0;
            right: 0;

            .column-box {
              border-bottom: 1px solid #ebeef5;

              &:last-child {
                border-bottom: none;
              }
            }
          }
        }

      }

      .good {
        border-bottom: 1px solid #ebeef5;

        &:last-child {
          border-bottom: none;
        }
      }




    }


    .info-self-btn {
      background: #F2F3F5;
      box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
      color: #1D2129;
      border-color: transparent;
    }

    // 标签
    .tag-status {
      height: 32px;
      padding: 0 8px;
      color: #06C36E;;
      font-size: 14px;
      font-weight: 400;
      border-radius: 2px;
      background: rgba(6, 195, 110, 0.10);
      line-height: 32px;
      display: inline-block;

      &.active {
        color: #FF010B;
        background: rgba(255, 1, 11, 0.10);
      }
    }


  }

  .order-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    .left-text {
      color: #1D2129;
      font-size: 14px;
      font-weight: 400;
    }


  }
}


// 评价
.dialog-wrapppx {
  .dialog-wrapper {
    color: #262728;
    font-size: 16px;
    font-weight: 400;
    .el-textarea {
      :deep(.el-textarea__inner) {
        border-radius: 12px;
      }
    }
  }
}
:deep(.dialog-wrapppx) {
  background: linear-gradient(to right,#FBFCFD,#F5F9FD,#ECF6FD);
}
</style>

